<template>
    <view class="content">
        <image class="logo" src="../../static/logo.png"></image>
        <view>
            <text class="title">{{title}}</text>
        </view>
        <view class="btns">
            <button :type="info.type" :key="info.name" @click="btn_navi(info)" v-for="info in navi_info">{{info.name}}</button>
        </view>
        <view>
            <text>相关链接：</text>
        </view>
        <view class="urls">
            <text style="color: #007AFF;" :key="info.name" @click="url_navi(info)" v-for="info in urls_info">{{ info.name }}</text>
        </view>
        <view style="line-height: 2rem; padding: 40upx; color: #4CD964; font-size: 80%;">
            Andy @ 2019
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: "Welcome Andy's Site!",
                navi_info: [{
                        name: "个人信息",
                        url: "../info/info?pos=top",
                        type: "primary",
                    },
                    {
                        name: "项目经历",
                        url: "../info/info?pos=prjs",
                        type: "default",
                    },
                    {
                        name: "个人周边",
                        url: "../info/info?pos=other",
                        type: "default",
                    }
                ],
                urls_info: [{
                        name: "CSDN",
                        url: "https://blog.csdn.net/bbdxf"
                    },
                    {
                        name: "CnBlogs",
                        url: "https://bbdxf.cnblogs.com"
                    },
                    {
                        name: "Gitee",
                        url: "https://gitee.com/bbdxf"
                    },

                ]
            }
        },
        onLoad() {
            uni.showShareMenu({
                withShareTicket: true,
            })
        },
        methods: {
            btn_navi: function(info) {
                // console.log(info)
                uni.navigateTo({
                    url: info.url
                })
            },
            url_navi: function(info) {
                uni.navigateTo({
                    url: "../urlsee/urlsee?see=" + info.url
                })
            }
        }
    }
</script>

<style lang="scss">
    .content {
        text-align: center;
        height: 400upx;

        view {
            padding-bottom: 20upx;
        }
    }


    .logo {
        height: 200upx;
        width: 200upx;
        margin-top: 200upx;
    }

    .title {
        font-size: 36upx;
        color: #8f8f94;
    }

    .btns {
        padding: 20upx 40upx;

        button {
            margin-bottom: 20upx;
        }
    }

    .urls {
        padding: 20upx 40upx;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;

    }
</style>
